<template>
  <div>
    SonItem:
    <input type="text" v-model="props.msg" />
    <p>computedTest:{{ computedTest }}</p>
    <p>user:{{ user }}</p>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  msg: {
    type: String,
  },
});
const innerMsg = toRef(props, "msg");
console.log(innerMsg, "innerMsg");
watch(innerMsg, () => {
  console.log("props.msg变化了");
});
watch(props, () => {
  console.log("hello world");
});
const computedTest = computed(() => {
  return innerMsg.value;
});
watch(
  () => computedTest.value,
  () => {
    // alert("computedTest变化了");
    console.log("computedTest变化了", computedTest);
  }
);

const user = reactive({
  msg: ref("tusuzer"),
});
console.log(user, "user");
</script>

<style scoped></style>
